<template>
  <div class="customer-container" style="margin-top: 20px;">
    <div class="customer-data" style="padding: 24px">
      <div style="align-items: center;display: flex;">
        <div style="flex: 1;">
          <Title :is-show="true" :total="list.total" title="供货价导入记录" />
        </div>
      </div>
      <div v-loading="listLoading" style="min-height: 100px;">
        <el-table
          v-if="list.items.length > 0"
          ref="customerTableRef"
          :data="list.items"
          class="table-fixed"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row>
          <el-table-column align="left" label="文件名" min-width="110">
            <template slot-scope="scope">
              {{ scope.row.fileName }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="生效开始时间" min-width="165">
            <template slot-scope="scope">
              {{ scope.row.startTime | standardFormat('YYYY/MM/DD') }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建时间" min-width="165">
            <template slot-scope="scope">
              {{ scope.row.createTime | standardFormat('YYYY/MM/DD HH:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建人" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.creator || '--' }}
            </template>
          </el-table-column>
        </el-table>
        <empty-placeholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
      </div>
      <el-row type="flex" justify="end" class="pagination-area">
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';

import { getImportLog } from '@/api/commerce';
import { standardFormat } from '@/filters/date';

export default {
  components: { Title, EmptyPlaceholder },
  filters: {
    standardFormat
  },
  data() {
    return {
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInit: true
      },
      listLoading: false,
      page: 1,
      perPage: 20
    };
  },
  created() {
    this.getDataLog(true);
  },
  methods: {
    getDataLog(reset = '') {
      if (reset) this.page = 1;
      this.listLoading = true;
      const params = {
        page: this.page,
        perPage: this.perPage
      };
      getImportLog(params).then(({ data }) => {
        this.list = data;
        this.list.isInit = false;
        this.listLoading = false;
      }, result => {
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getDataLog(true);
    },

    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getDataLog();
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-info {
  margin: 20px;
  margin-bottom: 12px;
  box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
  border-radius:8px;
  background-color: #fff;
  padding: 15px 20px 20px;
}
.customer-container {
  &::v-deep {
    .customer-data {
      margin: 0 20px 12px 20px;
      box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
      border-radius:8px;
      background-color: #fff;
      padding: 20px;
      box-sizing: border-box;
    }
    .customer-order {
      margin: 0 20px 20px 20px;
      box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
      border-radius:8px;
      background-color: #fff;
      padding: 15px 20px 20px;
    }
  }
}
.overdue-tag {
  margin-left: 8px;
  color: #FF504F;
  background-color: #fff;
  border: 1px solid #FF504F;
  width: 120px;
  height: 26px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  i {
    margin-right: 5px;
    font-size: 16px;
  }
}
.edit-btn {
  width:80px;
  height:32px;
  background:rgba(64,110,255,1);
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:16px;
  font-family:PingFangSC-Medium,PingFang SC;
  color:#fff;
  line-height:32px;
  cursor: pointer;
  img {
    margin-left:5px;
    width: 15px;
    height: 15px;
  }
  &:hover {
    background: #2a58f0;
  }
}
.op-btn {
  color: #2a58f0;
  cursor: pointer;
}
</style>
